// 柱状图组件
// 1. 把功能代码都放到这个组件中
// 2. 把可变的部分抽象成prop参数

import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';


const BarChart = ({ title, xData, sData, style = { width: '400px', height: '300px' } }) => {
    const chartRef = useRef(null)
    useEffect(() => {
        // 1. 生成实例
        const myChart = echarts.init(chartRef.current)
        // 2. 装备图表参数
        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: sData,
                type: 'bar'
                }
            ]
        };
        // 3. 使用图表参数完成图表的渲染
        myChart.setOption(option);
    }, [title, sData, xData])
    return (
        <div ref={chartRef} style={style} />
    )
}

export default BarChart